<template>
    <div class="box">
      <header class="header">
         <van-nav-bar
  title="详情"
  left-text="返回"
  right-text="按钮"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
>
  <template #title>
         <div class="iconfont icon-sousuo dds">
        <input type="text" @input="seach" v-model="val" >
      </div>
  </template>
  <template #right>
    <van-button type="danger" size='mini'>搜索</van-button>
  </template>
</van-nav-bar>

</header>
<p class="qs">最近搜索</p>
<div v-for="(item) in list1" :key="item" class="vs">{{item}}</div>
<p class="qs">热门搜索</p>
<div v-for="(item,i) in list" :key="i" class="vs">{{item.keyword}}</div>
    </div>
</template>

<script>
import Vue from 'vue';
import { NavBar } from 'vant';
import { Button } from 'vant';
import { insearch,remensearch } from "@/utlis/seach";

Vue.use(Button);
Vue.use(NavBar);

export default {
data(){
    return {
        val:"",
        list:[],
        list1:['m','f'],

    }
},
methods:{
    onClickLeft(){
      this.$router.go(-1)
       this.$store.commit("seachval","")
    },
    onClickRight(){
    //   console.log(1);
    //   this.showPopover= true
        this.$router.push("/seach2")
        this.$store.commit("seachval",this.val)
        // localStorage.setItem("lish",)
                insearch({keyword:this.val,count:1,limitNum:10}).then(res=>{
                    console.log(res.data.data);
            this.$store.commit("seachss1",res.data.data)
            
        })
    
    },
    seach(){
        // this.$store.commit('seachss')

       
    }
},
mounted(){
    remensearch().then(res=>{
        // console.log(res.data.data);
        this.list=res.data.data
        // res.data.data.forEach((v,i) => {
        //     console.log(v.keyword);
        //     this.list[i]=v.keyword
            
        // });
        // console.log(this);
        
    })
     this.val=this.$store.state.seachval
    
}
}
</script>

<style lang='stylus' scoped>
.dds{
  width 200px
  height 32px
  background-color: white
  border-radius: 20px
  border: 1px  solid #ccc
  input{
    margin-top 1vw
    outline: none
    border: 0
  }
  
}
.qs{
    margin 20px 0
}
.vs{
    display: inline-block
    margin 5px
}
</style>